<template>
  <div style="background: #202B61;width: 100%;height: 100%;">
    <div style="top: 1%; width: 100%;height: 90vh;float: left;position: absolute;">

      <div class="box1">
        <div id="div11" @click="buttonClick('resource', 'div11')" style="background:#409EFF" class="buttonStyle">太阳能</div>
        <div id="div12" @click="buttonClick('wind', 'div12')" class="buttonStyle">风能</div>
        <div id="div13" @click="buttonClick('fuelgas', 'div13')" class="buttonStyle">燃气</div>
        <div id="div14" @click="buttonClick('electricity', 'div14')" class="buttonStyle">电</div>
        <div id="div15" @click="buttonClick('geothermal', 'div15')" class="buttonStyle">地热</div>
        <div id="div16" @click="buttonClick('steam', 'div16')" class="buttonStyle">蒸汽</div>
        <div id="div17" @click="buttonClick('hotWater', 'div17')" class="buttonStyle">热水</div>
        <div id="div18" @click="buttonClick('smoke', 'div18')" class="buttonStyle">烟气</div>
        <div id="div19" @click="buttonClick('water', 'div19')" class="buttonStyle">水源</div>
      </div>

      <div class="box2">
        <router-view :key="activeDate"></router-view>
      </div>

    </div>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        project_id: this.$root.project_id
      }
    },
    methods: {
      buttonClick : function(type,divId){
        for(var i = 11;i<=19;i++){
          $("#div"+i).css("background","#202B61");
        }
        $("#"+divId).css("background","#409EFF");
        //路由跳转
        this.$router.push('/'+type)
      },
    }
  }
</script>

<style scoped="scoped">
  .box1 {
    position: relative;
    width: 12%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    height: 97%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
    display: inline-block;
    float: left;
    top: 1vh;
  }

  .box2 {
    position: relative;
    width: 87%;
    height: 97%;
    margin-top: 0.5%;
    margin-left: 0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border: none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
    display: inline-block;
    float: right;
  }

  .buttonStyle {
    height: 50px;
    width: 90%;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor:pointer;
    border-radius: 10px;
    font-family: Arial;
    border:none;
    color: #ffffff;
    font-size: 16px;
    background: #202B61;
    margin: 0.5vh 10px;
    text-align:center;
    line-height:6vh;
    vertical-align: middle;
    text-decoration: none;
    float: left;
    margin-left: 1vh;
  }
</style>
